<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>英雄管理</el-breadcrumb-item>
      <el-breadcrumb-item>装备管理</el-breadcrumb-item>
      <el-breadcrumb-item>新建装备</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-form label-position="right" label-width="100px">
        <el-form-item label="分类名称">
          <el-input style="width:250px" v-model="model.name"></el-input>
        </el-form-item>
        <el-form-item label="上传图标">
          <el-upload
            class="avatar-uploader"
            :action="$http.defaults.baseURL + '/upload'"
            :show-file-list="false"
            :headers="getAuthHeaders()"
            :on-success="afterUpload"
            name="file"
          >
            <img v-if="model.image" :src="model.image" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="saveEquip">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'EquipCreate',
  data() {
    return {
      model: {}
    }
  },
  methods: {
    afterUpload(res) {
      this.$set(this.model, 'image', res.url)
    },
    async saveEquip() {
      await this.$http.post('rest/equips', this.model)
      this.$message.success(`成功创建装备:${this.model.name}`)
      this.$router.push('/equips/list')
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
.el-icon-plus:before {
  line-height: 180px;
}
</style>